<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
    
      .out{
          width: 400px;
          height: 400px;
          background-color: tomato;
          margin: 100px 100px;
          position: relative;
      }

      .middle{
          width: 200px;
          height: 200px;
          background-color: aqua;
          /* position: absolute;
          left:100px;
          top:100px; */

          margin-left: 100px;
          
      }

      .inner{
          width: 100px;
          height: 100px;
          background-color: blue;
           /* position: absolute;
          left:300px;
          top:300px; */
          /* position:absolute;
          left:200px;
          top:200px; */

          /* position: absolute;
          top:-100px;
          left:-100px; */

          /* position: absolute;
          left:200px;
          top:200px; */

          position:absolute;
          left:300px;
          top:200px;

      }


    </style>
</head>
<body>
    <!-- 
       定位： position  （特点: 就是找对参考点）
         四个值：  1 static  静态  默认的
                  2  relative  相对定位 
                      相对定位 又称自私定位  
                      它的参考点： 原来所在位置的左上角   
                  3 absolute  绝对定位
                  绝对定位 又称无私定位
                  它的参考点: 离它最近的那个父元素，有定位属性的那个元素的左上角,
                            如果没有定位属性则继续往返上找，找到body元素结束


                  4 fixed    固定定位          
     -->
    
       <div class='out'>
           <div class='middle'>
               <div class='inner'></div>
           </div>
       </div>

</body>
</html>